﻿
@{
    ViewData["Title"] = "MenuIndex";
    Layout = "~/Views/Share/_LayoutBody.cshtml";
}

<div class="list-wall">
    <div class="list-top">
        <button type="button" authorize="yes" class="layui-btn layui-btn-warm layui-btn-xs" data-type="Add" id="Add"><i class="layui-icon">&#xe61f;</i> 新增</button>
        <button type="button" authorize="yes" class="layui-btn layui-btn-normal layui-btn-xs" data-type="Edit" id="Edit"><i class="layui-icon">&#xe642;</i> 修改</button>
        <button type="button" authorize="yes" class="layui-btn layui-btn-danger layui-btn-xs" data-type="Del" id="Del"><i class="layui-icon ">&#xe640;</i> 删除</button>
    </div>
    <div class="gridPanel">
        <table id="list1" class="table table-condensed"></table>
        <div id="pager1"></div>
    </div>
</div>
<script>$('.list-top').authorizeButton()</script>
<script>
    var bodyheight = 0;
      $(function () {
        bodyheight = document.body.scrollHeight;
        $("#list1").jqGrid({
            styleUI: 'Bootstrap',
            url: '@Url.Action("MenuList", "Menu")',
            datatype: "json",
            treeGrid: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'MenuNameCN',
            ExpandColClick: true,//点击展开
            //loadonce:true,
            //jsonReader: {
            //    repeatitems: false
            //},
            colModel: [
                { label: 'ID', name: 'id', index: 'id',  width: 75, hidden: true,},
                { label: '菜单', name: 'MenuID', index: 'MenuID', width: 120, hidden: true,key: true, },
                { label: '父节点', name: 'MenuParentID', index: 'MenuParentID', width: 120, hidden:true },
                { label: '菜单名称', name: 'MenuName', index: 'MenuName', width: 120, hidden: true},
                { label: '标签名称', name: 'MenuNameCN', index: 'MenuNameCN', width: 120 },
                {
                    label: '菜单类型',
                    name: 'MenuType',
                    index: 'MenuType',
                    width: 120,
                    align: 'center',
                    formatter: function (cellValue) {
                        if (cellValue == "1") {
                            return "菜单"
                        }
                        else {
                            return "按钮";
                        }
                        return '';
                    }
                },
                { label: '连接', name: 'MenuUrl', index: 'MenuUrl', width: 200, align: 'center'},
                { label: '排序', name: 'MenuSort', index: 'MenuSort', width: 120, align: 'center'},
                { label: '图标', name: 'MenuIcon', index: 'MenuIcon', width: 120, align: 'center' },
                { label: '备注', name: 'BZ', index: 'BZ', width: 120, align: 'center' },
                { label: '创建日期', name: 'CreateDate', index: 'CreateDate', width: 130, align: 'center' },
                { label: '创建人', name: 'CreateName', index: 'CreateName', width: 120, align: 'center'},

            ],
            treeIcons:{leaf:'ui-icon-document-b'},
            treeReader: {
                parent_id_field: "parent",
                level_field: "level",
                leaf_field: "isLeaf",
                expanded_field: "expanded",
                loaded: "loaded",
                icon_field:"icon"
            },
            width: $(window).width() - 20,
            autowidth: true,
            height: $(window).height()-80,
            mtype: "post",//向后台请求数据的ajax的类型。可选post,get
            //viewrecords: true,
            shrinkToFit: false,
          });


    });
    $(function () {
        $(window).bind('resize', function () {
            $("#list1").setGridWidth($(window).width() - 20);
            $("#list1").setGridHeight($(window).height() - 80);
        }).trigger('resize');
    });

    $(function (){
        $.hands = {
            Add: function () {
                var id = $("#list1").jqGrid('getGridParam', 'selrow');//根据点击行获得点击行的id（id为jsonReader: {id: "id" },）
                var rowData = $("#list1").jqGrid("getRowData", id);//根据上面的id获得本行的所有数据
                var ids = rowData.MenuID; //获得制定列的值 （UserID 为colModel的name）
                if (ids == null || ids == undefined) {
                    ids = "";
                }
                var url = "/Menu/AddIndex" + "?MenuID=" + ids;

                $.FromOpen('MenuFromAdd', '新增菜单按钮', url, '600px', '360px', '1000');
            },
            Edit: function () {
                var id = $("#list1").jqGrid('getGridParam', 'selrow');//根据点击行获得点击行的id（id为jsonReader: {id: "id" },）
                var rowData = $("#list1").jqGrid("getRowData", id);//根据上面的id获得本行的所有数据
                var ids = rowData.id; //获得制定列的值 （UserID 为colModel的name）
                if (ids == null || ids == undefined) {
                    layer.msg("请选择一行", { icon: 2 });
                    return;
                }
                var url = "/Menu/EditIndex" + "?ids=" + ids;
                $.FromOpen('MenuFromEdit', '修改菜单按钮', url, '600px', '390px', '1000');

            },
            Del: function () {
                var id = $("#list1").jqGrid('getGridParam', 'selrow');//根据点击行获得点击行的id（id为jsonReader: {id: "id" },）
                var rowData = $("#list1").jqGrid("getRowData", id);//根据上面的id获得本行的所有数据
                var ids = rowData.id; //获得制定列的值 （UserID 为colModel的name）
                if (ids == null || ids == undefined) {
                    layer.msg("请选择一行", { icon: 2 });
                    return;
                }
                layer.confirm('确认要删除选择的数据吗？', {
                    title: "删除角色",
                    btn: ['确定', '关闭'] //按钮
                }, function (index, layero) {
                    $.loading(true, "正在删除数据");
                    window.setTimeout(function () {
                        $.ajax({
                            url: "/Menu/DeleteMenu/",
                            data: { ids: ids },
                            type: "post",
                            dataType: "json",
                            success: function (data) {
                                $.loading(false);
                                if (data.errorMsg) {
                                    layer.msg(data.errorMsg, { icon: 2 });
                                }
                                else {
                                    $("#list1").trigger("reloadGrid");

                                }
                            },
                            error: function () {
                                $.loading(false);

                            },
                            complete: function () {
                                $.loading(false);
                            }
                        });

                    }, 500);
                    layer.close(index);

                }, function () {
                    return true;
                });
            },
           
            init:function() {
                $('#Add').on('click', $.hands.Add);
                $('#Edit').on('click', $.hands.Edit);
                $('#Del').on('click', $.hands.Del);
            }
        }
        $(function () {
            $.hands.init();
        });
    });

</script>

